<template>
    <view class="receive-container">
        <view class="u-flex address u-col-center" :style="`background-color:${bgColor};`" @click="selectAddress">
            <view class="icon-area">
                <text class="icon receive-icon">&#xe617;</text>
                <view class="o-font-size-sm o-font-color-blue" v-if="aftersales">退货地址</view>
                <view class="o-font-size-sm" v-else>收货地址</view>
            </view>
            <view class="info">
                <view>
                    <text class="name u-m-r-20">{{ userInfo.username }}</text>
                    <text class="phone">{{ userInfo.phone }}</text>
                </view>
                <view>{{ userInfo.address }}</view>
            </view>
            <view class="icon icon-right" v-if="showRight"></view>
        </view>
    </view>
</template>

<script lang="ts" setup>
interface T {
    userInfo?: any,
    bottomBorder?:boolean,
    option?:boolean,
    bgColor?:string,
    aftersales?:boolean,
    showRight?:boolean
}
const Props = withDefaults(defineProps<T>(),{
    userInfo:()=>({}),
    bottomBorder:true,
    /** 当订单详情页面时  不允许 跳转  需要传false */
    option:true,
    bgColor: '#FFF',
    aftersales: false,
    showRight: true
})

const selectAddress = () => {
    if (!Props.option) {
        return;
    }
    let para = {
        canSelect: true,
        title: '选择地址'
    };
    uni.$u.$MRouter.receiveAddress.to({ para: JSON.stringify(para) });
}
</script>

<style scoped lang="scss">

.receive-container {
    border-radius: 10rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    border-bottom: 4px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, #fdced9 0, #fdced9 20%, transparent 0, transparent 25%, #bad2fe 0, #bad2fe 44%, transparent 0, transparent 50%) 0/60px 60px;
}
.receive-icon {
    color: $cf-primary;
    font-size: 44rpx;
}
.address {
    padding: 20rpx;
    background-color: $uni-bg-color;

    .icon-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 140rpx;
        padding: 20rpx 0;
    }

    .info {
        margin-left: 20rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        flex: 1;

        .name {
            font-size: 28rpx;
            font-weight: bold;
        }
        .phone{
            font-weight: bold;
        }
    }
}
</style>
